<template>
  <a-form-model-item :prop="required ? prop : ''">
    <!-- 预览模式描述 -->
    <a-tree-select
      v-if="options.pattern == 1 || ([2, 3].includes(options.pattern) && options.disabled == false)"
      v-model="myValue"
      :multiple="options.multiple"
      :treeCheckable="options.treeCheckable"
      :allowClear="options.learable"
      :showSearch="options.showSearch"
      :replaceFields="{ children: 'children', title: 'name', value: 'value' }"
      :tree-data="treeData"
      :tree-checkable="options.treeCheckable"
      :disabled="options.disabled"
      :placeholder="options.placeholder"
    >
      <a-icon v-if="options.icon" slot="suffixIcon" :type="options.icon" />
    </a-tree-select>
    <div v-else :class="{ formMaringBox: true, beyond_hiding: index == undefined ? false : true }">
      <a-tooltip placement="topLeft">
        <template slot="title">
          <span>{{ defMyValue.join('，') }}</span>
        </template>
        {{ defMyValue.join('，') }}
      </a-tooltip>
    </div>
  </a-form-model-item>
</template>
<script>
import { quyeryTreeData } from '@/api/base/ha_depart'
import { queryTarType, tarList  } from '@/utils/apply_config/treeCustom.js'
const getParentKey = (id, tree) => {
  let parentKeys = []
  var forFn = function (arr, id) {
    for (let i = 0; i < arr.length; i++) {
      const node = arr[i]
      if (node.id === id) {
        parentKeys.push(id)
        forFn(tree, node.parentid)
        break
      } else {
        node.children && forFn(node.children, id)
      }
    }
  }
  forFn(tree, id)
  return parentKeys
}
const dataList = [] // 所有书节点的id
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const id = node.id
    const name = node.name
    const parentid = node.parentid
    let arr = dataList.filter((item) => {
      return item.id == id
    })
    if (arr.length > 0) {
      //|| !id.startsWith('dept_id')
      continue
    }
    dataList.push({ id, name, parentid })
    if (node.children) {
      generateList(node.children)
    }
  }
}
export default {
  data() {
    return {
      departId: 0,
      myValue: [],
      defMyValue: [],
      treeData: [],
      tempValue: []
    }
  },
  props: {
    // 多选
    multiple: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
    },
    span: {
      type: Number,
      default: 24,
    },
    prop: {
      type: String,
    },
    // 默认表格样式
    type: {
      type: String,
      default: 'table',
    },
    // 子表单用到
    index: {
      type: Number,
    },
    value: {
      type: String,
    },
    required: {
      type: Boolean,
      default: false,
    },
    // 属性配置参数
    options: {
      type: Object,
      default() {
        return {}
      },
    },
    // 布局配置参数
    config: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  created() {
    // console.log('树形控件', this.options)
    if (this.options.dynamicKey) {
      this.dynamicData(this.options.dynamicKey)
    }
  },
  watch: {
    myValue(val) {
      console.log('val', val)
      let tempArr = []
      for (let i = 0; i <= val.length - 1; i++) {
        if (val[i].indexOf('$') > -1) {
          tempArr.push(val[i].substring(0, val[i].indexOf('$')))
        } else {
          tempArr.push(val[i])
        }
      }
      if (this.options.multiple) {
        this.$emit(
          'updatedValueF',
          this.prop,
          tempArr ? tempArr.join(',') : '',
          this.index
        )
      } else {
        this.$emit('updatedValueF', this.prop, this.myValue, this.index)
      }
      this.$listeners.f_updateCheck(this.prop)
    },
    value() {
      console.log('触发', this.value)
      this.defMyValue = []
      let val = this.value.split(',')
      this.getValue(this.treeData, val)
    }
  },
  methods: {
    async dynamicData(key) {
      if (key == 'ad') {
        this.findTreeData()
      } else if (key == 'depart') {
        this.findTreeData()
      } else if (key == 'tartype') {
        await queryTarType()
        this.treeData = tarList
        // console.log('this.treeData', this.treeData)
      }
      // 树控件, 禁用状态查名称
      if(this.value) {
        let val = this.value.split(',')
        for (let i = 0; i <= val.length - 1; i++) {
          if (val[i].indexOf('$') > -1) {
            val[i] = val[i].substring(0, val[i].indexOf('$'))
          }
        }
        this.getDefValue(this.treeData, val)
      }
    },
    // 查找默认值 (id+name)
    getDefValue(treeData, valueArr) {
      treeData.map((v) => {
        if(valueArr.includes(v.id)) {
          this.myValue.push(`${v.id}$${v.name}`)
          this.defMyValue.push( v.name)
        }
        if (v.children && v.children.length > 0) {
          this.getDefValue(v.children, valueArr)
        }
      })
    },
    getValue(treeData, valueArr) {
      treeData.map((v) => {
        if(valueArr.includes(v.id)) {
          this.defMyValue.push( v.name)
        }
        if (v.children && v.children.length > 0) {
          this.getValue(v.children, valueArr)
        }
      })
    },
    // 查询树下拉的数据
    findTreeData() {
      quyeryTreeData({ parent: this.departId, type: this.options.dynamicKey }).then((res) => {
        console.log('树数据', res)
        if (res.code === 0 && res.data) {
          generateList(res.data)
          this.treeData = this.renderTreeNodes(res.data)
        }
      })
    },
    // 给树数据中的部门添加禁选属性
    renderTreeNodes(data) {
      const setData = data.map((item) => {
        if (item.id.substring(0, 7) == 'dept_id' && this.options.dynamicKey == 'user') {
          item.disabled = true
          item.children && this.renderTreeNodes(item.children)
        }
        if (item.id.substring(0, 7) != 'dept_id' && this.options.dynamicKey == 'depart') {
          item.disabled = true
          item.children && this.renderTreeNodes(item.children)
        }
        // id加名称给他搜索，用的时候在截取id出来
        item.value = item.id + '$' + item.name
        return item
      })
      return setData
    },
    helpChange() {
      if (this.options.change) {
        this.$emit('fHelp', this.options.change, this.index)
      }
    },
    helpClick() {
      if (this.options.click) {
        this.$emit('fHelp', this.options.click, this.index)
      }
    },
  },
}
</script>

